<template>
  <div class="example">
    <!-- 身份证正反面照片示例 -->
    <el-dialog
      :visible.sync="showDialog"
      width="100%"
      top="0"
      :close-on-click-modal="false"
      :lock-scroll="true"
      @close="close"
      :title="title"
    >
      <div class="card" v-if="type === 1">
        <img src="../assets/card-front.png" alt />
        <img src="../assets/card-backend.png" alt />
        <p>请保持证件清晰可见，大小符合上传要求</p>
      </div>
      <div class="avatar" v-else-if="type === 3">
        <img src="../assets/avatar.png" width="100%" alt />
      </div>
      <div class="graduation-certificate" v-else-if="type === 4">
        <img src="../assets/graduation-certificate.png" width="100%" alt />
      </div>
      <div class="card-bank" v-else-if="type === 5">
        <img src="../assets/card-bank.png" width="100%" alt />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../mixins/common'
export default {
  name: 'Example',
  props: ['type', 'isVisible'],
  mixins: [common],
  data () {
    return {
      showDialog: false,
      title: '身份证正反面示例'
    }
  },
  methods: {},
  watch: {
    isVisible (newVal, oldVal) {
      this.showDialog = newVal
    },
    type (newVal, oldVal) {
      if (newVal === 1) {
        this.title = '身份证正反面示例'
      } else if (newVal === 3) {
        this.title = '个人证件照示例'
      } else if (newVal === 4) {
        this.title = '学历证明实例'
      } else if (newVal === 5) {
        this.title = '工资银行卡示例'
      } else if (newVal === 7) {
        this.title = '其他示例'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
img
  width 100%

p
  text-align center
</style>
